<template>
  <drawer-box :title="'聊天信息'" :ifShow="ifShow" @closeDrawer="closeDrawer">
    <section class="self_scroll">
      <div class="userInfo">
        <div class="userImg">
          <avatar :id="current_contact.id" :fileType="current_contact.id_type === 1 ? 1 : 6" :imgID="current_contact.id_type === 1 ? contactInfo.user_img_id : contactInfo.group_img_id"></avatar>
        </div>
        <p class="userName">{{ current_name }}</p>
      </div>
      <div class="groupMember" v-if="current_contact.id_type === 2">
        <p class="title">群成员（{{ currentList.length }}）</p>
        <input
          type="text"
          class="search"
          placeholder="搜索"
          v-model="searchWord"
        />
        <ul :class="['memberList', 'clearfix', 'retract']" v-if="ifShow">
          <li
            class="member fl"
            v-for="item in currentList
              .filter(item => item.user_name.indexOf(searchWord) !== -1 || item.remarks.indexOf(searchWord) !== -1)
              .slice(0, ifCut ? ifCut : currentList.length)"
            :key="item.user_id"
          >
            <div
              class="ifSponsor"
              v-show="
                $store.state.chatInformation.groupList[current_contact.id]
                  .group_sponsor === item.user_id
              "
            ></div>
            <div
              class="deleteMember cp"
              v-if="
                $store.state.chatInformation.groupList[current_contact.id]
                  .group_sponsor !== item.user_id &&
                  $store.state.user.userInfo.user_id ===
                    $store.state.chatInformation.groupList[current_contact.id]
                      .group_sponsor
              "
              @click="deleteMember(item.user_id, item.user_name)"
            ></div>
            <avatar
              class="groupAvatar cp"
              :showuserinfo="'&' + item.user_id"
              :chat-isSelf="tools.isSelf(item.user_id) ? 1 : 0"
              :imgID="item.user_img"
              :id="item.user_id"
            ></avatar>
            <p class="singleWrap">{{ item.remarks ? item.remarks : item.user_name }}</p>
          </li>
        </ul>
        <p
          class="operate"
          v-show="
            currentList.filter(
              item => item.user_name.indexOf(searchWord) !== -1
            ).length > 32
          "
        >
          <span
            class="cp"
            v-show="
              ifCut &&
                currentList.filter(
                  item => item.user_name.indexOf(searchWord) !== -1
                ).length > 32
            "
            @click="operateList(0)"
            >展开</span
          >
          <span
            class="cp"
            v-show="
              !ifCut &&
                currentList.filter(
                  item => item.user_name.indexOf(searchWord) !== -1
                ).length > 32
            "
            @click="operateList(32)"
            >收起</span
          >
        </p>
      </div>
      <div class="addGroupMember cp" @click="addUser">
        <span>添加群成员</span>
        <img
          src="@/assets/message/rightArrow.png"
          alt=""
          ondragstart="return false"
        />
      </div>
      <div class="groupName clearfix" v-if="current_contact.id_type === 2">
        <span class="fl">群名称</span>
        <span
          class="fr name"
          v-if="
            $store.state.user.userInfo.user_id !==
              $store.state.chatInformation.groupList[current_contact.id]
                .group_sponsor
          "
          >{{ current_name }}</span
        >
        <input
          type="text"
          v-else
          placeholder="请输入"
          v-model="currentGroupName"
          @blur="updataGroupName"
        />
      </div>
      <div class="clearChatRecord cp" @click="ifShowClear = true">
        <span>清空聊天记录</span>
        <img
          src="@/assets/message/rightArrow.png"
          alt=""
          ondragstart="return false"
        />
      </div>
    </section>
    <div class="btns flex-center">
      <div
        :class="[
          'btn-white',
          ifSponsor ? 'sponsorExitGroup' : 'memberExitGroup'
        ]"
        v-if="current_contact.id_type === 2"
        @click="exitGroup"
      >
        退出群聊
      </div>
      <div
        class="btn-red-2 dissolution"
        v-if="ifSponsor && current_contact.id_type === 2"
        @click="dissolutionGroup"
      >
        解散该群
      </div>
    </div>
    <minDialogBox
      :dialogData="dialogData"
      @confirmBtnEvent="confirmBtnEvent"
      @cancelBtnEvent="cancelBtnEvent"
      v-if="ifShowClear"
    ></minDialogBox>
    <minDialogBox
      v-if="ifShowDelete"
      :dialogData="kickOutData"
      @determineBtnEvent="determineBtnEvent"
      @abolishBtnEvent="abolishBtnEvent"
    ></minDialogBox>
    <minDialogBox
      :dialogData="exitData"
      @sureBtnEvent="sureBtnEvent"
      @notSureBtnEvent="notSureBtnEvent"
      v-if="ifShowExit"
    ></minDialogBox>
    <minDialogBox
      :dialogData="dissolutionData"
      @sureDisBtnEvent="sureDisBtnEvent"
      @notSureDisBtnEvent="notSureDisBtnEvent"
      v-if="ifShowDissolution"
    ></minDialogBox>
    <add-group-dialog ref="addGroupMember"></add-group-dialog>
 </drawer-box>
</template>

<script>
import addGroupDialog from '@/components/searchBox/components/addGroupDialog'
import Avatar from '../../../../../components/avatar'

export default {
  components: {
    Avatar,
    addGroupDialog
  },
  data () {
    return {
      // 当前用户/群组
      oppositeContact: {},
      // 当前群名称
      currentGroupName: '',
      // 搜索群成员关键字
      searchWord: '',
      // 是否截取前32项人员
      ifCut: 32,
      // 群成员列表
      // 是否显示删除成员
      ifShowDelete: false,
      // 是否显示清空聊天记录
      ifShowClear: false,
      // 是否显示退出群聊
      ifShowExit: false,
      // 是否显示解散群聊
      ifShowDissolution: false,
      // 清空聊天记录data
      dialogData: {
        mainTips: ['确定清空聊天记录？'],
        btnList: [
          {
            name: '确认',
            color: 'blue',
            type: 'confirm'
          },
          {
            name: '取消',
            color: 'white',
            type: 'cancel'
          }
        ]
      },
      // 踢出群成员的id
      kickOutID: null,
      // 踢出群成员data
      kickOutData: {
        mainTips: [],
        btnList: [
          {
            name: '确定',
            color: 'blue',
            type: 'determine'
          },
          {
            name: '取消',
            color: 'white',
            type: 'abolish'
          }
        ]
      },
      // 退出群聊data
      exitData: {
        mainTips: ['确定退出群聊？'],
        subTips: '退出后仅通知群主，且不会再接收群聊消息',
        btnList: [
          {
            name: '确定',
            color: 'blue',
            type: 'sure'
          },
          {
            name: '取消',
            color: 'white',
            type: 'notSure'
          }
        ]
      },
      // 解散群聊data
      dissolutionData: {
        mainTips: ['确定解散该群？'],
        subTips: '解散该群后，会清空该群的聊天记录',
        btnList: [
          {
            name: '确定',
            color: 'blue',
            type: 'sureDis'
          },
          {
            name: '取消',
            color: 'white',
            type: 'notSureDis'
          }
        ]
      }
    }
  },
  computed: {
    // 群内成员信息
    currentList () {
      return this.$store.state.groups.currentList
    },
    // 是否展示
    ifShow () {
      return this.$store.state.message.ifShowChatDetail
    },
    // 当前用户/群组
    current_contact () {
      return this.$store.state.chatInformation.current_contact
    },
    // 用户信息
    contactInfo () {
      if (this.oppositeContact) {
        if (this.oppositeContact.id_type === 1) {
          return this.$store.state.chatInformation.userList[
            this.oppositeContact.id
          ]
        } else {
          return this.$store.state.chatInformation.groupList[
            this.oppositeContact.id
          ]
        }
      } else {
        return {}
      }
    },
    // 当前用户姓名
    current_name () {
      if (this.current_contact.id_type === 1) {
        if (this.contactInfo.remarks) {
          return this.contactInfo.remarks
        } else {
          return this.contactInfo.user_name
        }
      } else {
        return this.contactInfo.group_name
      }
    },
    // 是否群主
    ifSponsor () {
      if (this.current_contact.id_type === 2) {
        return (
          this.$store.state.chatInformation.groupList[this.current_contact.id]
            .group_sponsor === this.$store.state.user.userInfo.user_id
        )
      } else {
        return false
      }
    }
  },
  watch: {
    current_contact: {
      deep: true,
      immediate: true,
      handler (val, oldVal) {
        this.oppositeContact = val
        if (
          val &&
          oldVal &&
          !(val.id === oldVal.id && val.id_type === oldVal.id_type)
        ) {
          this.$store.commit('message/set_ifShowChatDetail', false)
        }
        if (val.id_type === 2) {
          // 重新获取群成员列表
          this.getGroupMemberList()
        } else {
          this.$store.commit('groups/set_currentList', [])
        }
      }
    },
    ifShow: {
      immediate: true,
      handler (val) {
        if (val) {
          if (this.current_contact.id_type === 2) {
            // 重新获取群名称
            this.getGroupName()
          }
        }
      }
    }
  },
  methods: {
    // 添加群成员
    addUser () {
      this.$store.commit('groups/set_selectedList', [])
      this.$store.commit('groups/set_addType', this.current_contact.id_type)
      this.$refs.addGroupMember.toggleShow()
    },
    // 关闭抽屉
    closeDrawer () {
      this.$store.commit('message/set_ifShowChatDetail', false)
    },
    // 确认清空
    confirmBtnEvent () {
      if (this.current_contact.id_type === 1) {
        this.$store.dispatch(
          'chatInformation/deleteUserAllMessage',
          this.current_contact.id
        )
      } else {
        this.$store.dispatch(
          'chatInformation/deleteGroupAllMessage',
          this.current_contact.id
        )
      }
      this.ifShowClear = false
    },
    // 取消清空
    cancelBtnEvent () {
      this.ifShowClear = false
    },
    // 确认删除群成员
    determineBtnEvent () {
      this.$store
        .dispatch('groups/deleteMembers', {
          groupID: this.oppositeContact.id,
          groupMembers: [this.kickOutID]
        })
        .then(res => {
          if (res.data && res.data.code === 200) {
            this.$store.commit(
              'groups/set_currentList',
              this.currentList.filter(item => item.user_id !== this.kickOutID)
            )
            this.kickOutID = null
            this.ifShowDelete = false
          }
        })
    },
    // 取消删除群成员
    abolishBtnEvent () {
      this.kickOutID = null
      this.ifShowDelete = false
    },
    // 获取群聊人员列表
    getGroupMemberList () {
      this.$store.dispatch(
        'groups/getGroupMemberList',
        this.current_contact.id
      )
    },
    // 展开/收起列表
    operateList (flag) {
      this.ifCut = flag
    },
    // 删除群成员
    deleteMember (id, name) {
      this.kickOutData.mainTips[0] = `确定移除群成员${name}`
      this.kickOutID = id
      this.ifShowDelete = true
    },
    // 修改群聊名称
    updataGroupName () {
      if (this.currentGroupName.trim()) {
        this.$store.dispatch('chatInformation/updateGroupName', {
          groupID: this.current_contact.id,
          groupName: this.currentGroupName
        })
      } else {
        this.getGroupName()
      }
    },
    // 获取群聊名称
    getGroupName () {
      this.currentGroupName = this.$store.state.chatInformation.groupList[
        this.current_contact.id
      ].group_name
    },
    // 退出群聊
    exitGroup () {
      this.ifShowExit = true
    },
    // 确认退出群聊
    sureBtnEvent () {
      this.$store.dispatch(
        'chatInformation/exitGroup',
        this.current_contact.id
      )
      this.ifShowExit = false
    },
    // 取消退出群聊
    notSureBtnEvent () {
      this.ifShowExit = false
    },
    // 解散群聊
    dissolutionGroup () {
      this.ifShowDissolution = true
    },
    // 确认解散群聊
    sureDisBtnEvent () {
      this.$store.dispatch(
        'chatInformation/dissolutionGroup',
        this.current_contact.id
      )
      this.ifShowDissolution = false
    },
    // 取消解散群聊
    notSureDisBtnEvent () {
      this.ifShowDissolution = false
    }
  }
}
</script>

<style scoped lang="scss">
.drawer {
  section {
    box-sizing: border-box;
    overflow-y: auto;
    height: calc(100% - 148px);
    padding: 0 20px;
    position: relative;

    .userInfo {
      height: 96px;
      border-bottom: 1px solid #ebedf3;
      padding: 24px 0;
      position: relative;

      .userImg {
        width: 48px;
        height: 48px;
      }

      .userName {
        position: absolute;
        left: 64px;
        top: 24px;
        font-size: 16px;
        color: #0D172C;
      }
    }

    .groupMember {
      border-bottom: 1px solid #ebedf3;

      .title {
        height: 58px;
        line-height: 58px;
      }

      .search {
        width: 440px;
        height: 32px;
        background-color: #f6f7fb;
        border: none;
        margin-bottom: 16px;
        padding-left: 36px;
        font-size: 12px;
        color: #0D172C;
        background-image: url("../../../../../assets/message/search.png");
        background-repeat: no-repeat;
        background-position: 10px center;
        background-size: 20px 20px;
      }

      .memberList {
        .member {
          width: 40px;
          margin-right: 16px;
          margin-bottom: 14px;
          position: relative;
          &:hover {
            .deleteMember {
              display: block;
            }
          }
          .ifSponsor {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 34px;
            width: 12px;
            height: 12px;
            background-image: url("../../../../../assets/message/sponsor.png");
            background-size: 12px 12px;
            background-repeat: no-repeat;
          }
          .deleteMember {
            width: 14px;
            height: 14px;
            background: url("../../../../../assets/message/deleteMember.png")
              no-repeat;
            background-size: 100% 100%;
            display: none;
            position: absolute;
            right: -7px;
            top: -7px;
          }
          .groupAvatar {
            width: 40px;
            height: 40px;
          }
          p {
            margin-top: 5px;
            font-size: 12px;
            color: #5f7196;
            text-align: center;
          }
          &:nth-child(8n) {
            margin-right: 8px;
          }
        }
      }
      .operate {
        text-align: center;
        color: #304eec;
        font-size: 14px;
        margin-bottom: 20px;
        margin-top: 4px;
        text-decoration: underline;
      }
    }

    .addGroupMember,
    .clearChatRecord {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #ebedf3;
      font-size: 14px;
      color: #2e3f64;
      position: relative;

      img {
        transform: rotateZ(-90deg) translateX(50%);
        transform-origin: center center;
        width: 12px;
        height: 12px;
        position: absolute;
        right: 0;
        top: 50%;
        vertical-align: middle;
      }
    }

    .groupName {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #ebedf3;
      font-size: 14px;
      color: #2e3f64;
      position: relative;
      .name {
        color: #0D172C;
      }
      input {
        vertical-align: middle;
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background-image: url("../../../../../assets/message/editRemark.png");
        background-size: 16px 16px;
        background-position: right center;
        background-repeat: no-repeat;
        padding-right: 20px;
        min-width: 80px;
        text-align: right;
      }
    }
  }
  .btns {
    font-size: 0;
    width: 100%;
    height: 84px;

    div {
      display: inline-block;
    }

    .sponsorExitGroup {
      width: 200px;
    }
    .memberExitGroup {
      width: 420px;
    }
    .dissolution {
      width: 200px;
    }
  }
}

.show {
  right: 0;
  box-shadow: -10px 0px 16px 0px #ebedf3;
}
</style>
